<template>
  <div id="app">
    <!-- 全局布局组件 -->
    <router-view v-slot="{ Component }">
      <!-- 使用淡入淡出过渡效果 -->
      <transition name="fade" mode="out-in">
        <!-- 保持组件状态，避免重复渲染 -->
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
    
    <!-- 全局加载指示器 -->
    <el-loading-fullscreen :loading="loading" />
    
    <!-- 全局通知/消息提示 -->
    <global-notification />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import ElLoadingFullscreen from '@/components/ElLoadingFullscreen.vue'
import GlobalNotification from '@/components/GlobalNotification.vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

// 全局加载状态
const loading = ref(false)

// 路由守卫 - 权限控制
watch(
  () => route.path,
  (newPath) => {
    // 检查需要认证的路由
    if (route.meta.requiresAuth && !authStore.isAuthenticated) {
      router.replace({
        path: '/',
        query: { redirect: newPath }
      })
    }
    
    // 页面加载效果
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 300)
  },
  { immediate: true }
)

// 处理401未授权情况
// watch(
//   () => authStore.isAuthenticated,
//   (isAuth) => {
//     if (!isAuth && route.meta.requiresAuth) {
//       router.replace('/')
//     }
//   }
// )
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
}

// 全局过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

// 全局Element Plus样式覆盖
.el-message {
  z-index: 99999 !important;
}

// 响应式布局
@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
  }
}
</style>